// vue的插件机制
// vue2: Vue.use(方法或对象)
// vue3: app.use(方法或对象)
// 对象：要有install方法 自动执行

import {App} from 'vue'
import {useIntersectionObserver} from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import SealSkeleton from '@/components/skeleton/index.vue'
import SealCarousel from '@/components/carousel/index.vue'
import SealMore from '@/components/more/index.vue'
import SealBread from '@/components/bread/index.vue'
import SealBreadItem from '@/components/bread/item.vue'
import SealCity from '@/components/city/index.vue'
import SealNumbox from '@/components/numbox/index.vue'
import SealButton from '@/components/button/index.vue'
import SealCheckbox from '@/components/checkbox/index.vue'



export default {
    install(app:App){
        // 注册全局的组件
        app.component('SealSkeleton',SealSkeleton)
        app.component('SealCarousel',SealCarousel)
        app.component('SealMore',SealMore)
        app.component('SealBread',SealBread)
        app.component('SealBreadItem',SealBreadItem)
        app.component('SealCity',SealCity)
        app.component('SealNumbox',SealNumbox)
        app.component('SealButton',SealButton)
        app.component('SealCheckbox',SealCheckbox)


        // 注册全局的指令
        // vue2:Vue.directive()    bind()      inserted()挂载
        // vue3:app.directive()    created()   mounted()挂载

        // <img v-lazy="图片地址">
        // 图片懒加载的指令
        app.directive('lazy',{
            mounted(el,binding){
                const {stop} = useIntersectionObserver(el,([{isIntersecting}])=>{
                    if(isIntersecting){
                        el.src = binding.value
                        stop()

                        el.onerror = function(){
                            el.src = defaultImg
                        }
                    }
                })
            }
        })


    }
}

